<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="searchText"
            prefix-icon="el-icon-search"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="danger" @click="handlerSearch">搜索</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="DialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>

      <el-table :data="tabledate" border>
        <el-table-column label="编号" prop="id" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column label="密码" prop="password" />
        <el-table-column label="邮箱" prop="mail" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click="handleEdit(scope.row)"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="handleDelete(scope.row)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      />

      <add-user v-model="DialogVisible" @response="response"></add-user>
      <edit-user
        v-if="editDialogVisible"
        v-model="editDialogVisible"
        @response="response"
        :rid="rid"
      ></edit-user>
    </el-card>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import addUser from "./addUser.vue";
import editUser from "./editUser.vue";
import {delUser,userList,findUser} from '../../api/userApi.js'
export default defineComponent({
  name: "~index",
  components: { addUser, editUser },
  setup(props, { emit, slots }) {
    const state = reactive({
      searchText: "",
      tabledate: [],
      DialogVisible: false,
      editDialogVisible: false,
      rid: "",
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 3,
      },
      async useLoadList() {
        const params = {
          pageNumber: state.pagination.currentPage,
          pageSize: state.pagination.pageSize,
          search: state.searchText,
        };
        userList(params).then((res)=>{
          console.log(res);
          state.tabledate = res.data.list;
        state.pagination.total = res.data.totalCount;
        })
 
      },
      response() {
        state.useLoadList();
      },
      handleEdit(row: any) {
        state.editDialogVisible = true;
        state.rid = row.id;
      },
      handleSizeChange(newSize: number) {
        state.pagination.pageSize = newSize;
        state.useLoadList();
      },
      handleCurrentChange(newCurrent: number) {
        state.pagination.currentPage = newCurrent;
        state.useLoadList();
      },
      async handleDelete(row: any) {
        const confirmResult = await ElMessageBox.confirm(
          "确定要删除该数据?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => err);
        if (confirmResult !== "confirm") return ElMessage.info("取消删除！");
       const  params= { id: row.id }
        delUser(params).then((res)=>{
          console.log(res);
           if (res.data.code === "ok") ElMessage.success("删除成功！");
        state.useLoadList();
        })
       
      },
      async handlerSearch() {
        state.pagination.currentPage = 1;
        const params = {
          pageNumber: state.pagination.currentPage,
          pageSize: state.pagination.pageSize,
          search: state.searchText,
        };
        // @ts-ignore
            findUser(params).then((res)=>{
          console.log(res);
          state.tabledate = res.data.list;
        state.pagination.total = res.data.totalCount;
        })
      },
    });
    state.useLoadList();
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang='css' scoped>
.el-breadcrumb {
  margin-bottom: 14px;
}
</style>
